CSS: box-sizing
例えば2 columnにする時に50%にしても、はみ出る
これは、「50%」はborderを含めない中身のみに対して指定しているから。
border分の誤差が生じるためにはみ出る
default
一般的にはこれを使うのが望ましいらしいmrsekut.icon
計算の予想がしやすいのでstylingしやすい
paddingとborderを幅と高さに含める
code:css
* { box-sizing: border-box; }
inherit
親要素の値を継承する
content-boxとborder-boxの違い
この違いはwidthやheightを指定している場合にのみ生じる
content-boxの場合
https://gyazo.com/fec6b78741da3c342d04e7956e6476c0
code:css
// 青に対して
box-sizing: content-box;
width: 100%;
padding: 5px;
width: 100%としているので、黄色の枠内に収まってほしいが、
width:100%はcontent部分のみに当たっている
図の赤四角がcontent部分
青と赤の間にはpadding分の隙間がある
2つの緑の線は同じ大きさ
左右のborder20pxと、左右のpadding10pxが、過剰なので30pxはみ出ている
この違いはwidthやheightを指定している場合にのみ生じるので、
width: 100%を除去するなり、width: auto(default値なので同義)を指定するなりするとピッタリになる
border-boxの場合
https://gyazo.com/b0f51ebeb55223a3e004abbe62b81e5e
code:css
// 青に対して
box-sizing: border-box;
width: 100%;
padding: 5px;
border-boxを指定しているため、content + padding + border全体に対してwidth:100%が当たる
この違いはwidthやheightを指定している場合にのみ生じるため、
contentのサイズは可能な限り自分で指定しないようにする、とある
width/heightを自分で指定するのではなく、親と子から導出されるべきmrsekut.icon
code:css
* {
box-sizing: border-box;
}